<!DOCTYPE html>

<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />


<title>sqpoll</title>

<link rel="shortcut icon" href="/sqpoll/resources/images/ico_sqpoll_logo.png" />
<link rel="apple-touch-icon" href="/sqpoll/resources/images/ico_sqpoll_logo.png" />
<link rel="apple-touch-startup-image" href="/resources/images/ios_splash.png" />
<link rel="stylesheet" href="/sqpoll/resources/rateit/rateit.css" >
<link rel="stylesheet" href="/sqpoll/resources/styles/app.css" />

<style>
/* Custom styles */
</style>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="/sqpoll/resources/scripts/jquery.ui.touch-punch.min.js"></script>
<script src="/sqpoll/resources/rateit/jquery.rateit.min.js"></script>
<script src="/sqpoll/resources/scripts/common.js"></script>
<script src="/sqpoll/resources/scripts/poll.js"></script>

<script type="text/javascript">

	/**
	 * Global variables.
	 */
	var questionSeq = 0;
	
	$("#pollTalkRoomPage").hide(); 
	
	/**
	 * Changes the poll talk room page.
	 */
	function changePollTalkRoomPage() {
		$("#pollProfileformPage").hide();
		$("#pollTalkRoomPage").show();
	}
	
	/**
	 * Changes the poll profile form page.
	 */
	function changePollProfileformPage() {
		$("#pollProfileformPage").show();
		$("#pollTalkRoomPage").hide();
	}
	
	$(function() {
		var sortableId = "#sortable-1";
		$(sortableId).sortable();
	  $(sortableId).disableSelection();
	  // refresh list to the end of sort to have a correct display.
	  $(sortableId).bind("sortstop", function(event, ui) {
	    $(sortableId).listview("refresh");
	  });
	});
   
	$(function() {
		var backingId = "#backing-1";
		var rateidId = "#rateit-1";
		$(rateidId).rateit({ max: 5, step: 0.5, backingfld: backingId , resetable: false, ispreset: true });
	});
	
</script>
</head>

<body>
	
	<!-- Poll profile form page -->
	<div id="pollProfileformPage">
		<div id="header">
			<h1> <spring:message code="msg.poll.profile" /> </h1>
			<a href="javascript:history.back(-1);" class="btn_left"><spring:message code="msg.back" /></a>
			<a href="javascript:changePollTalkRoomPage();" class="btn_right"><spring:message code="msg.next" /></a>
		</div>

		<!-- popup dialog -->
		<div id="popupPollProfileformDialog">
			<div id="popupDialogMessage"></div>
		</div>

		<div id="content">		
			<form id="pollProfileform" method="post" action="#">
				<input id="surveyId" type="hidden" name="surveyId" value="<c:out value="${surveyId}"/>"  />
				
				<div class="frm">
					<dl class="fld">
						<dt><label for="title"><spring:message code="msg.poll.title" /></label></dt>
						<dd><input id="title" type="text" name="title" maxlength="200" class="it" placeholder="<spring:message code="msg.input.poll.title.here" />" required /></dd>
					</dl>

					<dl class="fld" style="display: none;">
						<dt><label for="instruction"><spring:message code="msg.instruction" /></label></dt>
						<dd><textarea id="instruction" name="instruction" class="it"></textarea></dd>
					</dl>

					<dl class="fld divider">
						<dt><label for="pollType"><spring:message code="msg.poll.type" /></label></dt>
						<dd>
							<select id="pollType" name="pollType" class="it sel">
								<option value="groupPoll"><spring:message code="poll.type.group" /></option>
								<option value="openPoll"><spring:message code="poll.type.open" /></option>
							</select>
						</dd>
					</dl>

					<dl class="fld divider">
						<dt><label><spring:message code="msg.interactive.mode" /></label></dt>
						<dd class="rad">
							<input type="radio" name="pollInteractiveMode" id="radio-choice-interactivemode-yes" value="true" checked="checked" />
			        <label for="radio-choice-interactivemode-yes">Yes</label>
			        <input type="radio" name="pollInteractiveMode" id="radio-choice-interactivemode-no" value="false" />
			        <label for="radio-choice-interactivemode-no">No</label>
		        </dd>
					</dl>
					
					<dl class="fld divider">
						<dt><label for="participantUserLevel"><spring:message code="msg.participant.user.level" /></label></dt>
						<dd>
							<select id="participantUserLevel" name="participantUserLevel" class="it sel">
								<option value="anyone" selected><spring:message code="participant.user.level.anyone" /></option>
								<option value="memberonly"><spring:message code="participant.user.level.memberonly" /></option>		
							</select>
						</dd>
					</dl>
					
					<dl class="fld">
						<dt><label for="participantIdentificaton"><spring:message code="msg.participant.identification" /></label></dt>
						<dd>
							<select id="participantIdentificaton" name="participantIdentificaton" class="it sel">
								<option value="realname" selected><spring:message code="participant.identification.realname" /></option>
								<option value="anonymous"><spring:message code="participant.identification.anonymous" /></option>			
							</select>
						</dd>
					</dl>
				</div>
				
				<div class="hbtns divider">
					<a href="javascript:changePollTalkRoomPage();" class="btn"><spring:message code="msg.move.next" /></a>
				</div>

			</form>
		</div>
	</div>
	
	<!-- Poll talk room page -->
	<div id="pollTalkRoomPage" style="display: none;">
		<div id="header">
			<h1> <spring:message code="msg.poll.talk.room" /> </h1>
			<a href="javascript:changePollProfileformPage();" class="btn_left"><spring:message code="msg.back" /></a>
			<a href="#" class="btn_right" id="btnAddQuestionDefintion"><spring:message code="msg.add.question" /></a>
		</div>
		
		<div id="content">
			<div id="questionList" class="poll_timeline">
				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="badge_rect2">작성중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							<div class="fld">
								<fieldset class="fld_wrap">
									<legend class="hidden"></legend>
    							<div>
    								<label class="hidden" for="question_txt"></label>
    								<table style="width:100%;padding:0;margin:0">
	    								<colgroup><col style="width:99%" /><col style="width:49px" /></colgroup>
	    								<tr>
		    								<td>
			   									<span class="question_input">
													<textarea id="question_txt" class="question_ta" placeholder="여기에 질문을 입력하세요."></textarea>
													</span>
												</td>
												<td>
													<a href="#" class="question_media_btn">사진</a>
												</td>
											</tr>
										</table>
									</div>
								</fieldset>
							</div>
		
							<dl class="fld">
								<dt><label for="questionType">질문유형</label></dt>
								<dd>
									<select id="questionType" name="questionType" class="it sel">
										<option value="singleChoice">단일선택형</option>
										<option value="multipleChoice">복수선택형</option>
									</select>
								</dd>
							</dl>
							
							<dl class="fld">
								<dt><label for="pollCloseDate">마감일</label></dt>
								<dd><input id="pollCloseDate" name="pollCloseDate" type="date" name="pollCloseDate" step="1" class="it" /></dd>
							</dl>
							
							<div id="answerChoiceDefinitionList" class="fld divider">
								<label class="fld_wrap fld_lbl">답변항목:</label>
								<ul class="fld_wrap">
									<li id="choiceItem1">
   									<table style="width:100%;padding:0;margin:0">
	    								<colgroup><col style="width:99%" /><col style="width:21px" /><col style="width:21px" /></colgroup>
	    								<tr>
		    								<td>
													<input id="choice1" name="choice1" class="it" />
												</td>
												<td>
													<a href="#" class="btn_plus">추가</a>
												</td>
												<td>
													<a href="#" class="btn_delete">삭제</a>
												</td>
											</tr>
										</table>
									</li>
									<li id="choiceItem2">
   									<table style="width:100%;padding:0;margin:0">
	    								<colgroup><col style="width:99%" /><col style="width:21px;" /><col style="width:21px;" /></colgroup>
	    								<tr>
		    								<td>
													<input id="choice1" name="choice1" class="it" />
												</td>
												<td>
													<a href="#" class="btn_plus">추가</a>
												</td>
												<td>
													<a href="#" class="btn_delete">삭제</a>
												</td>
											</tr>
										</table>
									</li>
									<li id="choiceItem3">
   									<table style="width:100%;padding:0;margin:0">
	    								<colgroup><col style="width:99%" /><col style="width:21px;" /><col style="width:21px;" /></colgroup>
	    								<tr>
		    								<td>
													<input id="choice1" name="choice1" class="it" />
												</td>
												<td>
													<a href="#" class="btn_plus">추가</a>
												</td>
												<td>
													<a href="#" class="btn_delete">삭제</a>
												</td>
											</tr>
										</table>
									</li>
								</ul>
							</div>
						</div>
						
						<div class="hbtns divider">
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">확인</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>

				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">가장 구매하고 싶은 스마트폰은 무엇인지 선택하세요.가장 구매하고 싶은 스마트폰은 무엇인지 선택하세요.가장 구매하고 싶은 스마트폰은 무엇인지 선택하세요.</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								가장 구매하고 싶은 스마트폰은 무엇인지 선택하세요.(단일선택)
							</div>

							<div id="answerChoiceList" class="fld">
								<ul class="fld_wrap">
									<li id="choiceItem1">
										<fieldset>	
   										<input id="answerChoice1" type="radio" name="question1" />
			        				<label for="answerChoice1">답변선택항목1</label>
			        			</fieldset>
			        		</li>
			        		<li id="choiceItem2">
			        			<fieldset>	
   										<input id="answerChoice2" type="radio" name="question1" />
			        				<label for="answerChoice2">답변선택항목2</label>
			        			</fieldset>
			        		</li>
			        		<li id="choiceItem3">
			        			<fieldset>	
   										<input id="answerChoice3" type="radio" name="question1" />
			        				<label for="answerChoice3">답변선택항목3</label>
			        			</fieldset>
			        		</li>
									<li id="addNewItem">
   									<table style="width:100%;padding:0;margin:0">
	    								<colgroup><col style="width:20px;" /><col style="width:99%;" /><col style="width:21px;" /><col style="width:21px;" /></colgroup>
	    								<tr>
	    									<td>
	    										<input id="answerChoice" type="radio" name="question1" /><label for="answerChoice"></label>
	    									</td>
		    								<td>
													<input id="choice1" name="choice1" class="it_small" />
												</td>
												<td>
													<a href="#" class="btn_check">확인</a>
												</td>
												<td>
													<a href="#" class="btn_delete">삭제</a>
												</td>
											</tr>
										</table>
									</li>
									<li id="choiceItem4">
			        			<fieldset>	
   										<input id="answerChoice4" type="radio" name="question1" />
			        				<label for="answerChoice4">답변선택항목3<span class="user_added_answer_choice_info">by 루이짱 03.09 13:10</span></label>
			        			</fieldset>
			        		</li>
			        		<li id="etcAnswerItem">
			        			<table style="width:100%;padding:0;margin:0">	
			        				<colgroup><col style="width:55px;white-space:nowrap;" /><col style="width:99%;overflow:hidden;display:inline-block;" /></colgroup>
			        				<tr>
	   										<td>
	   											<fieldset>	
			   										<input id="answerEtcChoice" type="radio" name="question1" />
						        				<label for="answerEtcChoice">기타:</label>
			        						</fieldset>
												</td>
				        				<td>
					        				<input id="etcAnswer" name="etcAnswer" class="it_small" />
				        				</td>
			        				</tr>
			        			</table>
			        		</li>
								</ul>
							</div>
						</div>
						
						<div class="hbtns divider">
							<a href="#" class="btn">답변항목추가</a>
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="left"><b><em>배영규 03.06 19:30</em></b></span>
						<span class="right">
							<a href="javascript:;"><b class="ico_chat _clickGoPostViewComment" data-post-no="210713">10</b></a>
							<a href="javascript:;"><b class="ico_group _clickGoPostViewComment" data-post-no="210713">7</b></a>
							<a href="javascript:;" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>


				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					
					<div class="poll_footer">
						<span class="left"><b><em>배영규 03.06 19:30</em></b></span>
						<span class="right">
							<a href="javascript:;"><b class="ico_chat _clickGoPostViewComment" data-post-no="210713">10</b></a>
							<a href="javascript:;"><b class="ico_group _clickGoPostViewComment" data-post-no="210713">7</b></a>
							<a href="javascript:;" class="ico_expand">펼치기</a>
						</span>
					</div>
				</div>

				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title">
							<span class="nick">루이짱</span>
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								가장 구매하고 싶은 스마트폰은 무엇인지 선택하세요.(복수선택)
							</div>

							<div id="answerChoiceList" class="fld">
								<ul class="fld_wrap">
									<li id="choiceItem1">
										<fieldset>	
   										<input id="answerChoice1" type="checkbox" name="question1" class="regular-checkbox" />
			        				<label for="answerChoice1">답변선택항목1</label>
			        			</fieldset>
			        		</li>
			        		<li id="choiceItem2">
			        			<fieldset>	
   										<input id="answerChoice2" type="checkbox" name="question1" class="regular-checkbox" />
			        				<label for="answerChoice2">답변선택항목2</label>
			        			</fieldset>
			        		</li>
			        		<li id="choiceItem3">
			        			<fieldset>	
   										<input id="answerChoice3" type="checkbox" name="question1" class="regular-checkbox" />
			        				<label for="answerChoice3">답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목답변선택항목3</label>
			        			</fieldset>
			        		</li>
									<li id="addNewItem">
   									<table style="width:100%;padding:0;margin:0">
	    								<colgroup><col style="width:20px;" /><col style="width:99%;" /><col style="width:21px;" /><col style="width:21px;" /></colgroup>
	    								<tr>
	    									<td>
	    										<input id="answerChoice" type="checkbox" name="question1" class="regular-checkbox" /><label for="answerChoice"></label>
	    									</td>
		    								<td>
													<input id="choice1" name="choice1" class="it_small" />
												</td>
												<td>
													<a href="#" class="btn_check">확인</a>
												</td>
												<td>
													<a href="#" class="btn_delete">삭제</a>
												</td>
											</tr>
										</table>
									</li>
			        		<li id="etcAnswerItem">
			        			<table style="width:100%;padding:0;margin:0">	
			        				<colgroup><col style="width:55px;white-space:nowrap;" /><col style="width:99%;overflow:hidden;display:inline-block;" /></colgroup>
			        				<tr>
	   										<td>
	   											<fieldset>	
			   										<input id="answerEtcChoice" type="checkbox" name="question1" class="regular-checkbox" />
						        				<label for="answerEtcChoice">기타:</label>
			        						</fieldset>
												</td>
				        				<td>
					        				<input id="etcAnswer" name="etcAnswer" class="it_small" />
				        				</td>
			        				</tr>
			        			</table>
			        		</li>
								</ul>
							</div>
						</div>
						
						<div class="hbtns divider">
							<a href="#" class="btn">답변항목추가</a>
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>
				

				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="nick">루이짱</span>
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								가장 구매하고 싶은 스마트폰은 무엇인지 순서대로 나열하세요.(랭크)
							</div>

							<div id="answerChoiceList" class="fld">
								<ul class="fld_wrap sortable" id="sortable-1">
									<li id="choiceItem1">답변선택항목1</li>
			        		<li id="choiceItem1">답변선택항목2</li>
			        		<li id="choiceItem1">답변선택항목3</li>
			        		<li id="choiceItem1">답변선택항목4</li>
			        		<li id="choiceItem1">답변선택항목5</li>
								</ul>
							</div>
						</div>
						
						<div class="hbtns divider">
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>


				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="nick">루이짱</span>
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								아래 사진의 점수를 매겨주세요.(별점)
							</div>

							<div id="answerChoiceList" class="fld">
								<div class="fld_wrap">
									<input type="hidden" id="backing-1">
									<div id="rateit-1" class="rateit bigstars" data-rateit-resetable="false" data-rateit-starwidth="32" data-rateit-starheight="32">
									</div>
								</div>
							</div>
						</div>

						<div class="hbtns divider">
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>


				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="nick">루이짱</span>
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								의견을 자유롭게 보내주세요.(자유입력형)
							</div>

							<div id="answerChoiceList" class="fld">
								<div class="fld_wrap">
									<textarea name="freetext" maxlength="200" class="ta_small" placeholder="200자 이내"></textarea>
								</div>
							</div>
						</div>

						<div class="hbtns divider">
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>


				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="nick">루이짱</span>
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								 몇개가 좋아요?(숫자형)
							</div>

							<div id="answerChoiceList" class="fld">
								<div class="fld_wrap">
									<input type="number" data-inset="true" name="number" min="0" step="1" class="it_small" />
								</div>
							</div>
						</div>

						<div class="hbtns divider">
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>


				<div class="poll_box">
					<div class="poll_header bg_1">
						<a href="#" class="user"></a>
						<p class="title ellipsis">
							<span class="nick">루이짱</span>
							<span class="badge_rect1">진행중</span>
							<span class="text"><a href="#">질문 내용...</a></span>
						</p>
						<p class="info">
							03.01 24:00 마감
						</p>
					</div>
					<div class="poll_content">
						<div id="questionDefinition" class="frm">
							
							<div class="fld_wrap question_text">
								 이 앱 좋나요?(예/아니오)
							</div>

							<div id="answerChoiceList" class="fld">
								<ul class="fld_wrap">
									<li id="choiceItem1">
										<fieldset>	
   										<input id="answerChoice1" type="radio" name="question1" value="true" />
			        				<label for="answerChoice1">예</label>
			        			</fieldset>
			        		</li>
			        		<li id="choiceItem2">
			        			<fieldset>	
   										<input id="answerChoice2" type="radio" name="question1" value="false" />
			        				<label for="answerChoice2">아니오</label>
			        			</fieldset>
			        		</li>
			        	</ul>
							</div>
						</div>

						<div class="hbtns divider">
							<a href="#" class="btn">삭제</a>
							<a href="#" class="btn">편집</a>
						</div>
						<div class="divider"></div>
					</div>
					
					<div class="poll_footer">
						<span class="right">
							<a href="#" class="ico_collapse">숨기기</a>
						</span>
					</div>
				</div>


			</div>
		</div>
	</div>
</body>
</html>